<%@page import="com.boxin.ims.modules.wechat.utils.WechatUtils"%>
<%@page import="com.thinkgem.jeesite.common.utils.StringUtils"%>
<%@page import="com.boxin.ims.modules.wechat.entity.UserDefine"%>
<%@page import="com.zhixun.mobile.sys.utils.SessionMemberUtils"%>
<%@page import="com.boxin.ims.modules.wechat.entity.WechatMember"%>
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html  style="overflow-x:hidden;overflow-y:auto;">
<head>

<title>砸金蛋</title>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Cache-Control" content="no-store" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

<meta name="viewport"
	content="width=device-width initial-scale=1.0  maximum-scale=1.0">
<link rel="stylesheet" type="text/css" href="${ctxStatic}/lottery/eggs/css/common.css" media="all"/>
	<script src="${ctxStatic}/member/themes/default/jquery-1.9.1.min.js" type="text/javascript"></script>
<link href="${ctxStatic}/member/themes/default/default.css" type="text/css" rel="stylesheet" />

		<script src="${ctxStatic}/member/themes/default/wScratchPad.js" type="text/javascript"></script>
		<script src="${ctxStatic}/member/themes/default/alert.js" type="text/javascript"></script>
		
		<style>
			.back{ background-color:#ce080d; width:100%;max-width:100%;margin:auto;min-height:100%;background:url(${ctxStatic}/lottery/eggs/images/eggbg.jpg) no-repeat;background-size:contain;}
			
			#info{padding:60px 10px 10px 10px;overflow:hidden;clear:both;}
			#info .infoBox{background:#b70d0f;border:1px solid #d74e4a;padding:5px;margin-bottom:10px;color:#fff}
			#info .infoBox dt{height:30px;background:url('${ctxStatic}/lottery/eggs/images/tat.png') no-repeat;background-size:108px 30px;color:#fff;line-height:30px;overflow:hidden;position:relative;left:-10px;padding-left:10px;font-weight:bold}
			#info .infoBox dd{margin-left:20px;font-size:12px}
			#info .infoBox dd div{position:relative;margin:5px 0}
			#info .infoBox dd i{position:absolute;left:-15px;font-style:normal}
			#info .infoBox dd a{background:#f3a20a;color:#fff;font-weight:bold;padding:5px 10px;border-radius:5px;overflow:hidden;text-shadow:1px 1px 1px #333}
			#info .hitegg-record-item span{margin-right:10px}
			#info .infoBox .tpl-prize{line-height:20px;}
			.close {
				position: absolute;
				right: 10px;
				top: 15px;
				color: #ff0;
				cursor: pointer;
				height: 20px;
				width: 20px;
				}
	</style>
	<style type="text/css">
			
			.egg{ z-index:2;width:100%;top:180px;}
			.egg ul li{z-index:100;}
			.eggList{padding-top:80px;position:relative;}
			.eggList li{float:left;background:url(${ctxStatic}/member/themes/fashion/img/egg_1.png) no-repeat bottom;width:68px;height:97px;cursor:pointer;position:relative;margin-left:30px;}
			.eggList li span{position:absolute; width:30px; height:60px; left:40px; top:24px; color:#ff0; font-size:42px; font-weight:bold}
			.eggList li.curr{background:url(${ctxStatic}/member/themes/fashion/img/egg_2.png) no-repeat bottom;cursor:default;z-index:300;}
			.eggList li.curr sup{position:absolute;background:url(${ctxStatic}/member/themes/fashion/img/img-4.png) no-repeat;width:142px; height:78px;top:-36px;left:-34px;z-index:800;}
			.eggList li.curr sub{position:absolute;background:url(${ctxStatic}/member/themes/fashion/img/img-5.png) no-repeat;width:142px; height:78px;top:-36px;left:-34px;z-index:800;}
			.hammer{background: url('${ctxStatic}/member/themes/fashion/img/img-6.png') no-repeat scroll 0% 0% transparent;width:44px;height:57px;position:absolute; text-indent:-9999px;z-index:150;left:95px;top:80px;}
			.resultTip{position:absolute; background:#ffc ;width:20px;padding:3px;z-index:1000;top:220px; right:0px; color:#f60; text-align:center;overflow:hidden;display:none;z-index:500;}
			.resultTip b{font-size:12px;line-height:18px;}
			.btn {
float: left;
width: 48%;
height: 40px;
line-height: 40px;
text-decoration: none;
text-align: center;
background: #e4393c;
color: #fff;
position: relative;
border-radius: 2px;height: 40px;
line-height: 40px;
margin-top:20px;
}
input {
width: 70%;
height: 38px;
line-height: 38px;
border: 1px solid #ddd;
background-color: #eee;
}
			
		</style>		
			
</head>

<%
	String userId = request.getParameter("uid");
	WechatMember member =	SessionMemberUtils.getSessionMemberByUserId(request,userId);
	
	UserDefine userDefine  = new UserDefine();
	if(StringUtils.isNotEmpty(userId)){
		userDefine = WechatUtils.getUserDefineByUserId(Long.parseLong(userId));
	}
	
%>


<body  style="background-color:#ce080d;">
 <div class="back">

	<div class="egg">
		<ul class="eggList">
			<p class="hammer" id="hammer">锤子</p>
			<p class="resultTip" id="resultTip"><b id="result"></b></p>
			<li><span></span><sup></sup><sub></sub></li>
			<li><span></span><sup></sup><sub></sub></li>
			<li><span></span><sup></sup><sub></sub></li>
		</ul>
		
	</div>
	
	

<script type="text/javascript">
function tips_pop(){
	
	
	  var MsgPop=document.getElementById("winpop");
	  var popH=parseInt(MsgPop.style.height);//将对象的高度转化为数字
	   if (popH==0){
	   MsgPop.style.display="block";//显示隐藏的窗口
	  show=setInterval("changeH('up')",2);
	   }
	  else { 
	   hide=setInterval("changeH('down')",2);
	  }
	}
	function changeH(str) {
	 var MsgPop=document.getElementById("winpop");
	 var popH=parseInt(MsgPop.style.height);
	 console.log(popH);
	 if(str=="up"){
	  if (popH<=100){
	  MsgPop.style.height=(popH+240).toString()+"px";
	  }
	  else{  
	  clearInterval(show);
	  }
	 }
	 if(str=="down"){ 
	  if (popH>=4){  
	  MsgPop.style.height=(popH-240).toString()+"px";
	  }
	  else{ 
	  clearInterval(hide);   
	  MsgPop.style.display="none";  //隐藏DIV
	  }
	 }
	}
	window.onload=function(){//加载
	document.getElementById('winpop').style.height='0px';

	}

function eggClick(obj) {
	
  var _this = obj;
  $.getJSON("${ctxFront}/member/doEggsLotteryByNotMeb?uid=${uid}&wechatId=${wechatId}",function(res){//ajax请求
    _this.unbind('click'); //解除click
    $(".hammer").css({"top":_this.position().top-55,"left":_this.position().left+185});
    $(".hammer").animate({//锤子动画
      "top":_this.position().top-25,
      "left":_this.position().left+125
      },30,function(){
    	
    	  if(res.success ==1 ){//返回结果
            	//金花四溅
               _this.find("sub").remove(); //金花四溅
          	  _this.find("sup").show(); 
               
          	tips_pop();
          	$("#lotteryId").val(res.lotteryId);
          	$("#lotteryName").html("恭喜您获得了"+res.lotteryName);
              
              $(".eggList li").unbind("click");
            }else{
               _this.find("sup").remove(); //金花四溅
               _this.find("sub").show(); //金花四溅
              $("#message").html(res.message);
              $(".eggList li").unbind("click");
            }
    	  
        _this.addClass("curr"); //蛋碎效果
        
        $(".hammer").hide();//隐藏锤子
        $('.resultTip').css({display:'none',top:'100px',left:_this.position().
                left+45,opacity:0})
                .animate({top: '50px',opacity:1},300,function(){//中奖结果动画
        });	
      }
    );
  });
}



$(".eggList li").click(function() {
	
	$(this).children("span").hide();
	eggClick($(this));
});



$(".eggList li").hover(function() {
	var posL = $(this).position().left + $(this).width();
	$("#hammer").show().css('left', posL);
})



function onSubmit(){
	
	var lotteryId=$("#lotteryId").val();
	var mobile=$("#mobile").val();
	
	 $.getJSON("${ctxFront}/member/doLotteryByNotMeb?uid=${uid}&wechatId=${wechatId}&mobile="+mobile+"&lotteryId="+lotteryId,function(res){//ajax请求
		 if(res.success==="0"){
			 
			 $("#lotteryName").remove();
			 $("#msg").remove();
			 
			 var str="<span style='font-size:16' >恭喜您提交成功！<br/>我们会在24小时内将话费冲于您填写的手机号</span><br/><a href='http://mp.weixin.qq.com/s?__biz=MzA3MTQwMDAzMg==&mid=201123441&idx=1&sn=0f14db4a2d934cbbddd040156c33fab6&scene=1#rd' class='btn btn_cart' style='margin-left: 25%;'  >赶快分享给您的好友吧</a>"
			 $(".login_form").html(str);
		 }
	 })
}


</script>

<div>
	
</div>


 <div class="eggall">
  <div id="info">
            <dl class="infoBox">
                <dt>奖品信息</dt>
                <dd>
                    <div> <span id="message">您还未开始砸金蛋!</span></div>
                </dd>
            </dl>
            <dl class="infoBox">
                <dt>活动规则</dt>
                <dd>
                    <p class="tpl-prize">选择一个金蛋砸</p>
                </dd>
            </dl>
            <dl class="infoBox">
                <dt>奖项设置</dt>
                <dd>
                    <div class="tpl-prize-list">
                        <p class="tpl-prize">
                        随机获得1-100元话费不等
                        </p>
                    </div>
                </dd>
            </dl>
        </div>
 </div> 
        
<footer>
            <div class="footer">
                  <p><%-- 版权所有&copy;&nbsp;&nbsp;<%=userDefine.getFooter() %>  --%><br>
					技术支持：<a href="http://www.hdzhx.com/boxin/index.html" >智讯互联</a><!-- &nbsp;&nbsp;	
					<a href="callto:03107056607">0310-7056607</a> -->
	</p>
            </div>
</footer>
  </div>      
         
	
</body>
</html>
<style>
#winpop { z-index:500;   width:80%; height:0px; position:fixed; right:10%; top:24%; background:#fc6000;border-radius:15px; margin:0; padding-top:10px;overflow:hidden; display:none;_top:       expression(eval(document.compatMode &&
            document.compatMode=='CSS1Compat') ?
            documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
            document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/
}
#winpop .title { width:100%; height:22px; line-height:20px; padding-left:2%;padding-right:2%;padding-top:10px;padding-bottom:10px;font-weight:bold;  font-size:16px;color:#fff}
#winpop .con { width:96%; font-size:12px; color:#fff; text-decoration:none;padding-left:2%;padding-right:2%;line-height:20px;}
#silu { font-size:12px; color:#fff; position:absolute; right:0; text-align:right; text-decoration:underline; line-height:22px;}
</style>


<div id="winpop" style="overflow-y:auto" >
 <div class="title">提示信息<span class="close"     onclick="tips_pop()">X</span></div>
 <div class="con" >
 <form id="loginForm"   action="${ctxMember}/login" method="post">
 				<span id="lotteryName"></span><br/>
 				<span id="msg" >该手机号为您注册会员时的手机号，如不符合，请填写您正在使用的手机号,我们会将话费充于该手机号</span>
	        <div class="login_form">
	       		<input type="hidden" id="lotteryId" name="lotteryId" class=" inputstyle" >
	            <div class="uinArea" style="margin-left:20px;margin-top:20px;"   >
	               手机:  <input type="text" id="mobile" name="mobile" class="inputstyle"   value="${member.mobile }"   />
	            </div>
	            <div class="uinArea" style="clear:both;margin-left:80px;">
	               <div class="btn_wrap">
	                 <input name="" class="btn btn_cart" onclick="onSubmit()" value="申   请"  type="button"  style="margin-bottom:10px;border:none"  />
	               </div>
	            </div>     
	        </div>              
	   </form>
</div>
</div>
